<template>
  <view class="od_detail">
    <div class="top">
      <div class="top1">
        订单信息
      </div>
      <div class="top3">
        <span>订单详情：</span>
        <span>交易成功</span>
      </div>
      <div class="top3">
        <span>订单编号：</span> <span>444444444444444444444</span>
      </div>
      <div class="top3">
        <span>创建时间：</span> <span>2023年3月9日22:07:57</span>
      </div>
      <div class="top3">
        <span>付款方式：</span> <span>客户支付</span>
      </div>
      <div class="top3">
        <span>付款时间：</span> <span>2023年3月9日22:08:42</span>
      </div>
    </div>
    <div class="shop">
      <div class="top1">
        商品信息
      </div>
      <div class="center">
        <image class="img" src="../../../static/design/default.png" mode=""></image>
        <div class="center_wz">
          设计方案套餐设计方案套餐设计方案套餐
        </div>
        <div class="money">
          ￥499.00
        </div>
        <div class="bottom">
          <span>直接购买</span><span>X2</span>
        </div>
      </div>
      <div class="center">
        <image class="img" src="../../../static/design/default.png" mode=""></image>
        <div class="center_wz">
          设计方案套餐设计方案套餐设计方案套餐
        </div>
        <div class="money">
          ￥499.00
        </div>
        <div class="bottom">
          <span>直接购买</span><span>X2</span>
        </div>
      </div>
      <div class="button">
        <div class="button1">
          联系客服
        </div>
        <div class="button2">
          一物一拍
        </div>
      </div>
      <div class="top2">
        <span>商品总价：</span> <span>￥499.00</span>
      </div>
      <div class="top2">
        <span>可选服务：</span> <span>¥4.00 退换服务保险服务</span>
      </div>
      <div class="top2">
        <span>运费：</span> <span>￥499.00</span>
      </div>
      <div class="top2">
        <span>设计费：</span> <span>￥49.00</span>
      </div>
      <div class="top2">
        <span>实付款：</span> <span>¥4449.00</span>
      </div>
    </div>
    <div class="buyer">
      <div class="top1">
        买家信息
      </div>
      <div class="top2">
        <span>买家：</span> <span>曹某某</span>
      </div>
      <div class="top2">
        <span>微信号：</span> <span>4444444444444</span>
      </div>
      <div class="top2">
        <span>手机号：</span> <span>1377777</span>
      </div>
    </div>
    <div class="design">
      <div class="top1">
        设计信息
      </div>
      <div class="top2">
        <span>设计师：</span> <span>曹某某</span>
      </div>
      <div class="top2">
        <span>设计方案：</span> <span>查看</span>
      </div>
    </div>
    <!-- <div class="buttom_button">
      查看物流
    </div> -->
    <div class="bottom_button">
      查看物流
    </div>
  </view>
</template>

<script>
</script>

<style lang="scss" scoped>
  .top {
    width: 100%;
    // height: 300rpx;
    // border: 1rpx solid red;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background-color: #fff;
  }

  .top1 {
    width: 100%;
    height: 40rpx;
    font-size: 35rpx;
    font-weight: 600;
  }

  .top2 {
    width: 100%;
    height: 30rpx;
    margin-top: 25rpx;
    font-size: 20rpx;
    color: #7F7F7F;
    display: flex;
    justify-content: space-between;
  }
  .top3 {
    width: 100%;
    height: 30rpx;
    margin-top: 25rpx;
    font-size: 20rpx;
    color: #7F7F7F;
    display: flex;
    justify-content: space-between;
  }
  .top2 span:nth-child(1) {
    display: block;
    width: 140rpx;
    text-align: right;
  }
  .shop {
    width: 100%;
    // height: 300rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;
  }
  .center {
    width: 100%;
    height: 150rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 33rpx;
    position: relative;
  }
  .center_wz {
    width: 330rpx;
    height: 45rpx;
    float: left;
    font-size: 30rpx;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .money {
    font-size: 30rpx;
    color: red;
    font-weight: 600;
  }
  .img {
    width: 200rpx;
    height: 150rpx;
    border-radius: 25rpx 25rpx 0 0;
    float: left;
  }
  .bottom {
    height: 30rpx;
    width: 450rpx;
    position: absolute;
    bottom: 0;
    right: 15rpx;
    display: flex;
    justify-content: space-between;
    font-size: 20rpx;
    color: #7F7F7F;
  }
  .button {
    width: 100%;
    height: 60rpx;
    margin-top: 10rpx;
  }
  .button1 {
    width: 180rpx;
    height: 55rpx;
    background-color: #333333;
    color: #fff;
    line-height: 55rpx;
    text-align: center;
    border-radius: 25rpx;
    font-size: 25rpx;
    float: right;
  }
  .button2 {
    width: 180rpx;
    height: 55rpx;
    background-color: #333333;
    color: #fff;
    line-height: 55rpx;
    text-align: center;
    border-radius: 25rpx;
    font-size: 25rpx;
    float: right;
    margin-right: 20rpx;
  }

  .buyer {
    width: 100%;
    // height: 300rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;
  }
  .design {
    width: 100%;
    // height: 300rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;
  }
  .bottom_button {
    width: 180rpx;
    height: 55rpx;
    background-color: #333333;
    color: #fff;
    line-height: 55rpx;
    text-align: center;
    border-radius: 25rpx;
    font-size: 25rpx;
    float: right;
    margin-right: 15rpx;
    margin-top: 100rpx;
  }
</style>